<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            width: 600px;
            height: 400px;
            border: 2px solid #aaa;
            box-sizing: border-box;
            padding: 10px;
            overflow: auto;
        }
        .xiaoming{
            width: 600px;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .xiaoming input {
            flex: 1;
        }
        .xiaoming button {
            width: 100px;
        }
        .xiaohong {
            width: 600px;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .xiaohong input{
            flex: 1;
        }
        .xiaohong button{
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
            <!-- 
                子组件想父组件传参数第二步：
                在相对应子组件上绑定同名事件
                同时，在父组件中创建接收参数的事件与之绑定

             -->
        </ul>
            
             <!-- 插槽 slot -->
             <!-- 具名插槽 slot="xm" -->
             <xm-component @xm-to-parent="getXmMsg">
                 <div>这是小明的子节点</div>
                 <div slot="xm1">这是小明的子节点</div>
                 <div slot="xm2">这是小明的子节点</div>
                 <div slot="xm2">这是小明的子节点</div>
                 
             </xm-component>
             <xh-component @xh-to-parent="getXhMsg"></xh-component>
    </div>

    <script src="js/vue.js"></script>
    <script>
        //子组件像父组件传参数
        let myApp = new Vue({
            el:'#app',
            data:{
                list:[]
            },
            methods:{
                getXmMsg(data){
                    console.log(data)
                    this.list.push(data)
                },
                getXhMsg(data){
                    console.log(data)
                    this.list.push(data)
                }
            },
            components:{
                xmComponent:{
                    template:`
                        <div class="xiaoming">
                            <input v-model="xmMsg" type="text" />

                            <slot></slot>
                            <slot name="xm1"></slot>
                            <slot name="xm2"></slot>
                            <button @click="xmSend">小明说</button>
                        </div>
                    `,
                    data(){
                        return {
                            xmMsg:'小明发送的数据'
                        }
                    },
                    methods:{
                        xmSend(){
                            //子组件向父组件传参第一步：使用this.$emit()
                            this.$emit('xm-to-parent',this.xmMsg)
                        }
                    }
                },
                xhComponent:{
                    template:`
                        <div class="xiaohong">
                            <input v-model="xhMsg" type="text" />
                            <button @click="xhSend">小红说</button>
                        </div>
                    `,
                    data(){
                        return {
                            xhMsg:'小红发送的数据'
                        }
                    },
                    methods:{
                        xhSend(){
                            //子组件向父组件传参第一步：使用this.$emit()
                            this.$emit('xh-to-parent',this.xhMsg)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>